// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图和折线图图表，图表后缀都为 Chart
import { BarChart, BarSeriesOption, LineChart, LineSeriesOption, PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  DatasetComponent,
  DatasetComponentOption,
  GridComponent,
  GridComponentOption,
  MarkLineComponent,
  MarkPointComponent,
  TitleComponent,
  TitleComponentOption,
  ToolboxComponent,
  TooltipComponent,
  TooltipComponentOption,
  TransformComponent,
  GraphicComponent,
  GraphicComponentOption,
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

import { breakpoints } from '@/hooks/core/useMobile';
import { IDataShow } from '@/api/types';
import { LegendComponent } from 'echarts/components';
export type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
  | GraphicComponentOption
>;

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  BarChart,
  PieChart,
  MarkLineComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  ToolboxComponent,
  MarkPointComponent,
  GraphicComponent,
  LegendComponent,
]);

export { echarts };

export const colors = [
  '#4962FC',
  '#AB6EE5',
  '#dd3ee5',
  '#12e78c',
  '#fe8104',
  '#01C2F9',
  '#F4CB29',
  ' #FD9E06',
];

export const graphicColors = [
  ['#d223e7', '#f376e0'],
  ['#4962FC', '#768BFF'],
  ['#3F77FE', '#02CBF9'],
  ['#4962FC', '#189CBF'],
  ['#18D070', '#12ED93'],
  ['#01C2F9', '#3FD0F9'],
  ['#5052EE', '#AB6EE5'],
];

export const createCommonLineChartOption = (data: IDataShow) => {
  const result = {
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: data.xAxis,
    },
    yAxis: {
      type: 'value',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        show: true,
        type: 'cross',
      },
    },
    toolbox: {
      show: true,
      right: '3%',
      top: '1.5%',
      feature: {
        dataView: {
          readOnly: false,
        },
        magicType: {
          type: ['line', 'bar'],
        },
        restore: {},
        saveAsImage: {},
      },
    },
    title: {
      text: data.disName,
      top: '1.5%',
      left: '1%',
    },
    grid: {
      show: true,
      right: '8%',
      left: '5%',
      top: '13%',
      bottom: '3%',
      shadowColor: 'rgba(0, 0, 0, 0.5)',
      shadowBlur: 10,
      shadowOffsetX: 5,
      shadowOffsetY: -5,
      containLabel: true,
    },
    series: [
      {
        data: data.disData,
        type: data.type,
        smooth: true,
        areaStyle: {},
        markPoint: {
          data: [
            {
              type: 'max',
              name: 'Max',
            },
            {
              type: 'min',
              name: 'Min',
            },
          ],
        },
        markLine: {
          data: [
            {
              type: 'average',
              name: 'Avg',
            },
          ],
        },
      },
    ],
  };
  if (breakpoints.isSmaller('lg')) {
    // @ts-ignore
    result.series[0].markPoint = {};
    result.series[0].markLine.data.push(
      ...[
        {
          type: 'max',
          name: 'Max',
        },
        {
          type: 'min',
          name: 'Min',
        },
      ]
    );
  }

  return result;
};
